<!-- 商品列表页 可切换布局 -->
<template>
    <view class="goodsContent" :style="{ '--color': color }">
        <!-- 列表状态 -->
        <view class="hisGoodsList" v-if="type == 2 && goodsData.length > 0">
            <view @click="toGoods(item.goods_id, item.store_id)" class="hisGoods flex-box" v-for="(item, index) in goodsData" :key="index">
                <view class="p-re">
                    <image class="hisImg radius" :src="item.img ? $imgUrls(item.img) : staticUrl + '/images/imageLoading.png'" mode="aspectFill"></image>
                    <view class="masks height p-ab flexac" v-if="item.stock == 0">
                        <image :src="$imgUrls('Uploads/diy/img/sold.png')" class="sold"></image>
                    </view>
                </view>
                <view class="flex goodsmsg flex-box flex-between">
                    <view>
                        <view class="thmeTxt hisGoodsName lines2">
                            <text v-if="item.type == 1" class="speTag">特价</text>
                            <text v-if="item.type == 2" class="speTag">团购</text>
                            {{ item.name }}
                        </view>
                        <view class="saled selfEnd flex-box align-center" v-if="hot == 1">
                            <text>已售{{ item.sales_number }}</text>
                            <text>热度{{ item.show_number }}</text>
                        </view>
                        <view class="d-flex a-center m-top20" v-if="item.is_bnt == 1">
                            <view class="iconfont icon-store black size26"></view>
                            <text class="color_33 h6 ellipsis p-left6">{{ item.shop_name }}</text>
                        </view>
                    </view>
                    <view class="profitTitle_ lines" v-if="item.profitTitle">
                        <text>{{ item.profitTitle }}</text>
                    </view>
                    <view class="prices flex-box flex-between a-center" style="margin-left: 0" v-if="item.buy_config.state == 1">
                        <view>
                            <view class="priceNow">
                                <text class="price myPrice">{{ item.type == 2 ? item.open_group_price : item.price }}</text>
                                <template v-if="(item.type == 1 || item.type == 0) && parseFloat(item.price) != parseFloat(item.full_price)">
                                    <text class="priceReg myPrice">{{ item.full_price }}</text>
                                </template>
                                <template v-if="item.type == 2 && parseFloat(item.full_price) != parseFloat(item.open_group_price)">
                                    <text class="priceReg myPrice">{{ item.full_price }}</text>
                                </template>
                            </view>
                        </view>
                        <!-- 	<text class="lines">
							{{ item.price_description }}
						</text> -->
                        <view class="position flex-box align-center" v-if="startUp.enableLbs.state == 1 && positionshow == 1 && item.distance">
                            <text class="iconfont icon-dingwei"></text>
                            <text class="txt">
                                {{ parseFloat(item.distance) > 999 ? (parseFloat(item.distance) / 1000).toFixed(2) + 'km' : parseFloat(item.distance).toFixed(2) + 'm' }}
                            </text>
                        </view>

                        <view class="shopName" @click.stop="openPop(item)" v-if="cart">{{ item.price_name }}</view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 平铺状态 -->
        <view class="flex-box flex-between repeatGoodsList my-box" v-if="type == 1 && goodsData.length > 0">
            <waterfallsFlow ref="waterfallsFlow_" :list="goodsData" @image-click="toDetail" imageSrcKey="img" idKey="goods_id" :offset="12">
                <!-- #ifndef H5  -->
                <view v-for="(item, index) of goodsData" :key="index" slot="slot{{index}}" class="goods-box-msg" @click="toDetail(item)">
                    <view class="thmeTxt lines2 hisGoodsName2">
                        <text v-if="item.type == 1" class="speTag">特价</text>
                        <text v-if="item.type == 2" class="speTag">团购</text>
                        {{ item.name }}
                    </view>
                    <view class="saled" v-if="hot == 1">
                        <text>已售{{ item.sales_number }}</text>
                        <text>热度{{ item.show_number }}</text>
                    </view>
                    <view class="d-flex a-center m-top10" v-if="item.is_bnt == 1">
                        <view class="iconfont icon-store black size26"></view>
                        <text class="color_33 h6 ellipsis p-left6">{{ item.shop_name }}</text>
                    </view>
                    <view class="profitTitle_ lines" v-if="item.profitTitle">
                        <text>{{ item.profitTitle }}</text>
                    </view>
                    <view class="prices flex-box flex-between a-center" v-if="item.buy_config.state == 1">
                        <view>
                            <view class="priceNow">
                                <text class="price myPrice">{{ item.type == 2 ? item.open_group_price : item.price }}</text>
                                <template v-if="(item.type == 1 || item.type == 0) && parseFloat(item.price) != parseFloat(item.full_price)">
                                    <text class="priceReg myPrice">{{ item.full_price }}</text>
                                </template>
                                <template v-if="item.type == 2 && parseFloat(item.full_price) != parseFloat(item.open_group_price)">
                                    <text class="priceReg myPrice">{{ item.full_price }}</text>
                                </template>
                            </view>
                        </view>
                        <view class="position flex-box align-center" v-if="startUp.enableLbs.state == 1 && positionshow == 1 && item.distance">
                            <text class="iconfont icon-dingwei"></text>
                            <text class="txt">
                                {{ parseFloat(item.distance) > 999 ? (parseFloat(item.distance) / 1000).toFixed(2) + 'km' : parseFloat(item.distance).toFixed(2) + 'm' }}
                            </text>
                        </view>

                        <view class="shopName" @click.stop="openPop(item)" v-if="cart">{{ item.price_name }}</view>
                    </view>

                    <view class="maskObtained" v-if="item.state == 0">
                        <image :src="staticUrl + '/images/Obtained.png'" class="icon-obtained"></image>
                    </view>
                </view>
                <!--  #endif -->
                <!-- #ifdef H5 -->
                <template v-slot:default="{ item }">
                    <view class="goods-box-msg">
                        <view class="thmeTxt lines2 hisGoodsName2">
                            <text v-if="item.type == 1" class="speTag">特价</text>
                            <text v-if="item.type == 2" class="speTag">团购</text>
                            {{ item.name }}
                        </view>
                        <view class="saled" v-if="hot == 1">
                            <text>已售{{ item.sales_number }}</text>
                            <text>热度{{ item.show_number }}</text>
                        </view>
                        <view class="profitTitle_ lines" v-if="item.profitTitle">
                            <text>{{ item.profitTitle }}</text>
                        </view>
                        <view class="prices flex-box flex-between" v-if="item.buy_config.state == 1">
                            <view class="priceNow">
                                <text class="price myPrice">{{ item.type == 2 ? item.open_group_price : item.price }}</text>
                                <template v-if="(item.type == 1 || item.type == 0) && parseFloat(item.price) != parseFloat(item.full_price)">
                                    <text class="priceReg myPrice">{{ item.full_price }}</text>
                                </template>
                                <template v-if="item.type == 2 && parseFloat(item.full_price) != parseFloat(item.open_group_price)">
                                    <text class="priceReg myPrice">{{ item.full_price }}</text>
                                </template>
                            </view>
                            <view class="position flex-box align-center" v-if="startUp.enableLbs.state == 1 && positionshow == 1 && item.distance">
                                <text class="iconfont icon-dingwei"></text>
                                <text class="txt">
                                    {{ parseFloat(item.distance) > 999 ? (parseFloat(item.distance) / 1000).toFixed(2) + 'km' : parseFloat(item.distance).toFixed(2) + 'm' }}
                                </text>
                            </view>
                        </view>
                    </view>
                    <view class="maskObtained" v-if="item.state == 0">
                        <image :src="staticUrl + '/images/Obtained.png'" class="icon-obtained"></image>
                    </view>
                </template>
                <!-- #endif -->
            </waterfallsFlow>
        </view>

        <specsPopup :showPopup="showPopup" :pageData="info" @close="showPopup = false" @getCart="getCart" />
        <showModel @cancelFunc="showModal = false" goHome="0" v-if="showModal" type="2"></showModel>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    import waterfallsFlow from './waterfall/waterfall.vue';
    import specsPopup from '@/components/specsPopup.vue';
    export default {
        components: {
            waterfallsFlow,
            specsPopup
        },
        /**
         * type: 1瀑布流  2列表
         * hot:是否显示热度 0不显示 1显示
         *
         * **/
        props: ['goodsData', 'type', 'hot', 'positionshow', 'cart'],
        data() {
            return {
                imgUrl: this.imgUrl,
                staticUrl: this.staticUrl,
                showPopup: false,
                info: '',
                showModal: false
            };
        },
        methods: {
            toDetail(goods) {
                this.toGoods(goods.goods_id, goods.store_id);
            },
            openPop(item) {
                if (!this.vid) return (this.showModal = true);
                this.info = item;
                this.showPopup = true;
            },
            getCart() {
                this.$emit('getCart');
            }
        },
        computed: {
            ...mapState(['startUp', 'color', 'vid'])
        }
    };
</script>

<style scoped lang="scss">
    /* 商品列表 */
    .hisGoodsList {
        padding: 30rpx 24rpx;

        .hisImg {
            width: 200rpx;
            height: 200rpx;
            margin: 0 24rpx 0 0;
            border-radius: 8rpx;
        }

        .masks {
            width: 200rpx;
            background: rgba(0, 0, 0, 0.4);
            top: 0;
            left: 0;

            .sold {
                width: 120rpx;
                height: 120rpx;
            }
        }

        .speTag {
            margin-right: 4rpx;
        }

        .color333 {
            color: #333333;
            padding: 0;
            font-size: 26rpx;

            .bg {
                display: none;
            }
        }

        .prices {
            margin: 10rpx 8rpx 0 16rpx;

            .priceNow {
                margin-right: 10rpx;

                .price {
                    font-size: 32rpx;
                    color: $uni-color-price;
                }
            }

            .priceReg {
                color: #999;
                text-decoration: line-through;

                .price {
                    color: #999;
                    text-decoration: line-through;
                }
            }

            .position {
                text {
                    font-size: 26rpx;
                    color: #666666;
                    margin-left: 6rpx;
                }
            }
        }

        .hisGoods {
            margin-bottom: 26rpx;
            border-bottom: 1px solid #e0e0e0;
            padding-bottom: 26rpx;
            position: relative;

            &:nth-last-of-type(1) {
                border-bottom: none;
            }

            .goodsmsg {
                flex-direction: column;

                .selfEnd {
                    margin-top: 20rpx;
                }

                .hisGoodsName {
                    margin-bottom: 10rpx;
                    line-height: 36rpx;
                    font-size: 28rpx;
                }

                .saled {
                    text {
                        color: #888888;
                        font-size: 24rpx;
                        padding-right: 20rpx;
                        border-right: 1px solid #dddddd;
                        margin-right: 20rpx;
                        line-height: 20rpx;

                        &:nth-last-of-type(1) {
                            border: none;
                        }
                    }
                }
            }
        }
    }

    .shopName {
        padding: 4rpx 10rpx;
        border-radius: 10rpx;
        background-color: #ff4b4e;
        font-size: 22rpx;
        color: white;
        flex-shrink: 0;
    }
</style>
